<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"><!-- 声明字符集，防止乱码 -->
        <meta name="Keywords" content=""><!-- 搜索引擎方便找到本网站 -->
        <meta name="Description" content=""><!-- 找到网站以后的一个描述 -->
        <title>唱吧首页</title>
        <!-- css层叠样式表，可不写type -->
        <style type = "text/css">
            /* 去掉默认样式 */
            *{
                /* margin 上右下左 */
                margin:0px;
                padding:0px;
            }
            /* 最大的div，不设大小，等小div撑起；overflow与line-height配合，超出小div的部分隐藏 */
            #wrap{
                background:#ff5046;
                font-family:Microsoft yahei;
                overflow:hiden;
            }
            .header{
                /* 圈下样板页，定下width和height */
                width:960px;
                height:80px;
                margin:0px auto;/* aoto--自动设置居中 */                
                color:#fff;/* 字体白色 */                
                line-height:80px;/* 行高 */          
                /* background:green;       */
            }
            .header-l{                
                float:left;/* div可以盖住另一块div */
            }
            .header-l a{
                width:95px;
                display:block;
            }
            .header-l a img{                
                vertical-align:middle;/* 让图片在header上下居中 */
            }
            .header-r{
                /* ul浮动 */
                float:right;
            }
            .header-r ul:after{
                /* 伪类，将样式暂时取消掉 */
                content:'';
                display:left;
                height:0;
                clear:both;
            }
            .header-r ul li{
                /* 将圆点去掉,让li浮动 */
                list-style:none;
                float:left;
                margin-left:33px;
            }
            /*修饰title */
            .title{
                width:960px;
                margin:0px auto;
                /* background: skyblue; */
            }
            .title img{
                /* 展示 */
                display:block;
                margin:20px auto;
            }
            .title a{
                display:block;
                margin:0 auto;
                width:103px;
                height:48px;
                color:#fff;
                padding-left:60px;
                line-height:48px;
                /* 去掉文本下划线 */
                /* text-decoration:none;
                background:url('img/download.jpg') no-repeat */
            }
            /* 修饰最下面 */
            .content{
                position:relative;
                width:960px;
                height:413px;
                margin:0px auto;
                /* background:pink; */
                padding-bottom:60px;
            }
            .content img{
                /* 绝对定位 */
                position:absolute;
            }
            .content img:nth-child(1){
                top:0px;
                left:-1000px;

            }
            .content img:nth-child(1).on{
                left:0px;
                transition:.5s .5s;
            }
            .content img:nth-child(2){
                top:0px;
                left:-1000px;

            }
            .content img:nth-child(2).on{
                left:151px;
                transition:.5s .5s;
            }
            .content img:nth-child(3){
                top:0px;
                left:313px;
                animation:move .8s linear;
            }
            @keyframes move{
                0%{
                    opacity:0;
                    transform:scale(0);
                }
                30%{
                    opacity:1;
                    transform:scale(1.2);
                }
                40%{
                    opacity:1;
                    transform:scale(0.85);
                }
                50%{
                    opacity:1;
                    transform:scale(1.15);
                }
                60%{
                    opacity:1;
                    transform:scale(0.9);
                }
                70%{
                    opacity:1;
                    transform:scale(1.1);
                }
                80%{
                    opacity:1;
                    transform:scale(0.9);
                }
                90%{
                    opacity:1;
                    transform:scale(1.05);
                }
                100%{
                    opacity:1;
                    transform:scale(1);
                }
                
            }
            .content img:nth-child(4){
                top:0px;
                left:1530px;

            }
            .content img:nth-child(4).on{
                left:514px;
                transition:.5s .5s;
            }
            .content img:nth-child(5){
                top:0px;
                left:1530px;

            }
            .content img:nth-child(5).on{
                left:668px;
                transition:.5s .1s;
            }
            .content img:nth-child(6){
                top:0px;
                left:1530px;

            }
            .content img:nth-child(6).on{
                left:813px;
                transition:.5s .5s;
            }
        </style>
    </head>
    <!-- 网页可视内容区域 -->
    <body>
        <div id="wrap">
            <div class ="header">
                <div class = "header-l">
                    <a href=""><img src="img/logo.jpg"/></a>
                </div>
                <div class = "header-r">
                    <ul>
                        <li>首页</li>
                        <li>精彩</li>
                        <li>会员中心</li>
                        <li>金币充值</li>
                        <li>分享伴奏</li>
                        <li>唱吧直播间</li>
                        <li>火星直播</li>
                        <li>游戏中心</li>
                        <li>加入唱吧</li>
                    </ul>

                </div>
            </div>
            <div class = "title">
                <img src="img/ktv.jpg"/>
                <a href=""><img src="img/download.jpg"/></a>
                <!-- <a href="">免费下载</a> -->
            </div>
            <div class = "content">
                <img src="img/pic1.jpg"/>
                <img src="img/pic2.jpg"/>
                <img src="img/pic3.jpg"/>
                <img src="img/pic4.jpg"/>
                <img src="img/pic5.jpg"/>
                <img src="img/pic6.jpg"/>           
            </div>
        </div>
        <script type="text/javascript">
            var con =document.getElementsByClassName('content')[0];
            var aImg = con.getElementsByTagName('img');
            window.onload=function(){
                for(var i=0;i<aImg.length;i++){
                    aImg[i].className='on';
                }
            }
        </script>
    </body>
</html>